<template>
  <div class="test_mode_content">
    <div class="test_mode_content_top_content">
      <!-- <div class="test_records_list" @click="open_records">作答记录</div>
      试题测验
      <div class="mode_exit" @click="mode_exit">
        <i class="icon-tuichu iconfont"></i>
      </div> -->
      <div>
         <span @click="to_functionPage">首页 </span> / <span @click="mode_exit">训练模式 </span> / <span> 县区概况测验 </span>
      </div>
      <div>县区概况测验</div>
      <div>
        <div class="test_records_list" @click="open_records">作答记录</div>
      </div>
      
    </div>
<!--    试题--操作区域-->
    <div class="test_questions_answer">
      <div class="test_questions_content">
          <div class="test_questions_content_title">曲靖市辖区乡镇归属测试</div>
          <div class="test_questions_content_info">
              <div class="test_questions_content_info_div">
                <strong>姓名：</strong>{{username}}
              </div>
              <div class="test_questions_content_info_div">
                <strong>测验区域：</strong>{{test_range}}</div>
              <div class="test_questions_content_info_div">
                <strong>测验题数：</strong>{{test_nums}}</div>
          </div>
          <div class="test_questions_content_questions">
              <div class="test_questions_content_question"  v-for="(item,index) in topic_list_options" :key="index">
                  <div class="test_questions_content_question_topic">{{index+1}}、{{item.topic}}</div>
                  <div class="test_questions_content_question_options">
                    <div class="test_questions_content_question_option" v-for="(county_list_item,county_list_index) in item.options" :key="county_list_index">
                      <label>
                          <input type="radio" :value="county_list_item" v-model="user_selected[index]">
                          {{county_list_item}}
                      </label>
                    </div>
                  </div>
              </div>
          </div>

<!--        交卷-->
          <div class="test_questions_content_submit">
              <div class="test_questions_content_submit_div">
                  <div class="test_questions_content_submit_div_allTime">
                    {{test_conutTime.hour}}:
                    {{test_conutTime.min}}:
                    {{test_conutTime.sec}}
                    /<span>
                    {{test_time.hour}}:
                    {{test_time.min}}:
                    {{test_time.sec}}
                  </span> </div>
              </div>
              <div class="test_questions_content_submit_div">
                  <div class="test_questions_content_submit_div_userTimed" v-if="test_status">测试中……</div>
                  <div class="test_questions_content_submit_div_userTimed" v-if="!test_status">未在测试中</div>
              </div>
              <div class="test_questions_content_submit_div">
                  <div class="test_questions_content_submit_div_submint_button" @click="submit_the_paper">交卷</div>
              </div>
          </div>
      </div>

      <!--    进入阴影遮罩-->
      <div class="start_pop" v-if="start_pop_status"></div>

      <!--    交卷阴影遮罩-->
      <div class="submit_the_paper" v-if="submit_the_paper_pop">{{submit_text}}</div>

    </div>

<!--    右边区域-->
    <div class="test_right_info">

      <!--    设置区域-->
      <div class="test_user_interface">
        <div class="test_user_interface_title">
          <strong>设置区域</strong>
        </div>
        <div class="test_user_interface_content">
<!--          <div class="test_user_interface_content_select_place">-->
<!--            <div class="test_user_interface_content_select_place_tip">测验区域：</div>-->
<!--            <div class="block">-->
<!--                <el-cascader-->
<!--                  :options="options"-->
<!--                  :props="{ expandTrigger: 'hover' }"-->
<!--                  size="mini"-->
<!--                ></el-cascader>-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="test_user_interface_content_select_topic_nums">-->
<!--            <div class="test_user_interface_content_select_topic_tip">设置测验题数：</div>-->
<!--            <input type="number" min="10" max="137" @change="topic_nums_number_range" v-model="topic_nums_number">-->
<!--          </div>-->

<!--          <div class="test_user_interface_content_place_range">-->
<!--            <div class="test_user_interface_content_place_range_tip">当前题库范围：</div>-->
<!--            <div class="test_user_interface_content_place_rang_list">-->
<!--            </div>-->
<!--          </div>-->
          <div class="test_user_interface_content_set">
            <div class="test_user_interface_content_set_left">
              <div class="test_user_interface_content_set_left_title">题库占比</div>
              <div class="test_user_interface_content_set_left_content">
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[0]}"></div>
                  <div class="county_range_percentage_text">会泽县</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[1]}"></div>
                  <div class="county_range_percentage_text">宣威市</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[2]}"></div>
                  <div class="county_range_percentage_text">沾益区</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[3]}"></div>
                  <div class="county_range_percentage_text">麒麟区</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[4]}"></div>
                  <div class="county_range_percentage_text">马龙区</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[5]}"></div>
                  <div class="county_range_percentage_text">富源县</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[6]}"></div>
                  <div class="county_range_percentage_text">陆良县</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[7]}"></div>
                  <div class="county_range_percentage_text">罗平县</div>
                </div>
                <div class="test_user_interface_content_set_left_content_list">
                  <div class="county_range_percentage" :style="{width: topic_range_list[8]}"></div>
                  <div class="county_range_percentage_text">师宗县</div>
                </div>
              </div>
            </div>
            <div class="test_user_interface_content_set_right">
              <div class="test_user_interface_content_set_right_repeat_button" @click="random_100_topic_list">刷新试卷</div>
            </div>
          </div>

          <div class="test_user_interface_content_start_test">
            <div class="test_user_interface_content_start_test_start_botton" @click="start_test" v-if="!test_status">{{start_button}}</div>
          </div>
        </div>
      </div>


      <div class="test_training_records">
        <div class="test_training_records_title">答题卡</div>
        <div class="test_training_records_content">
            <div class="answer_cards_topic_nav" :class="{'answer_cards_height_light' : answer_cards_topic(i)}" v-for="i in Number(test_nums)" :key="i">{{i}}</div>
        </div>
        <div class="test_training_records_grade">
          <div class="test_training_records_grade_true">正确题数：<span>{{true_nums}}</span> </div>
          <div class="test_training_records_grade_false">错误及未作答题数：<span>{{false_nums}}</span> </div>
          <div class="test_training_records_grade_all_grade">总分：<span>{{train_grade}}</span> </div>
        </div>
      </div>

    </div>

<!--作答记录区域-->
    <div class="train_records" v-if="train_records_show">
        <div class="train_records_title">
          <div class=""></div>
          <div class="">测验记录</div>
          <div class="icon" @click="shutdown_train_records">
            <i class="icon-tuichu iconfont"></i>
          </div>
        </div>

        <div class="train_records_content">
          <div class="train_records_content_left">
            <div class="train_records_content_left_list"
                 @click="open_test_records_list_show(index)"
                 v-for="(item,index) in vuex_test_records_list"
                 :key="index">
              {{item.time}}--得分：{{item.train_grade}}
                </div>
          </div>
          <div class="train_records_content_right">
            <div class="train_records_content_right_content">
                <div class="train_records_content_right_content_questions_list"
                  v-for="(qitem, qIndex) in vuex_test_records_list[activeIndex]?.records || []"
                  :key="qIndex">
                  <div class="train_records_content_right_content_questions_list_topic">
                    {{qIndex+1}}、{{qitem.topic}}----------------------------正确答案：<span :class="{ 'text-true-color': qitem.status, 'text-false-color': !qitem.status }">{{qitem.true_answer}}</span>
                  </div>
                  <div class="train_records_content_right_content_questions_list_options">
                    <div class="train_records_content_right_content_questions_list_options_option" v-for="(option,oindex) in qitem.options" :key="oindex">
                      <label>
                            <input type="radio" class="custom-radio" :value="option" v-model="qitem.user_answer" disabled>
                            <label >{{option}}</label>
                      </label>
                    </div>
                  </div>
<!--                  正误勾叉-->
                  <div class="true_or_false">
                    <div class="user_true" v-if="qitem.status">&#x2713;</div>
                    <div class="user_false" v-if="!qitem.status">&#x2717;</div>
                  </div>
                </div>
            </div>
          </div>
        </div>
    </div>



  </div>
</template>

<script>
// import random_mode_map from "@/components/FunctionModulePage/TrainModel/training_mode_select/random_mode/random_mode_map";

export default {
  name: "test_questions_mode",
  data(){
    return{
      timer:null,  //测试定时器
      test_time_timer:null,   //计时器
      test_range:'全市区',
      start_button:'开始作答',
      test_status:false,  //测试状态
      start_pop_status:true,  //进入弹窗遮盖
      submit_the_paper_pop:false,  //交卷阴影遮盖
      train_records_show: false,   //作答记录显示
      //以县区分离的数据格式
      county_town_data:{
        huize:[],
        xuanwei:[],
        zhanyi:[],
        malong:[],
        qilin:[],
        fuyuan:[],
        luliang:[],
        luoping:[],
        shizong:[]
      },
      //以县区分离的数据格式转换为题库格式
      county_town_data_topic_list: {
        huize:[],
        xuanwei:[],
        zhanyi:[],
        malong:[],
        qilin:[],
        fuyuan:[],
        luliang:[],
        luoping:[],
        shizong:[]
      },
      //标准的全部乡镇数据
      all_county_town_JSONdata:[],
      submit_text:'交卷中',
      //测试倒计时
      test_conutTime: {
        hour: '00',
        min: '30',
        sec: '00',
      },
      //测试计时
      test_time:{
        hour: '00',
        min: '00',
        sec: '00',
      },
      user_selected:[],  //用户所做的答案
      topic_list_options:[],
      options: [
        {
          value: 'all_city',
          label: '全市区',
        },
        {
          value: 'county',
          label: '县区',
          children: [
            {
              value: 'huize',
              label: '会泽县',
            },
              {
              value: 'hxuanwei',
              label: '宣威市',
            },
              {
              value: 'zhanyi',
              label: '沾益区',
            },
              {
              value: 'malong',
              label: '马龙区',
            },
              {
              value: 'qilin',
              label: '麒麟区',
            },
              {
              value: 'fuyuan',
              label: '富源县',
            },
              {
              value: 'luliang',
              label: '陆良县',
            },
              {
              value: 'luoping',
              label: '罗平县',
            },
              {
              value: 'shizong',
              label: '师宗县',
            },
          ]
        }
      ],
      topic_nums_number:137,   //用户输入的题量
      topic_list:null,   //题库
      records:[],  //作答记录----当前测试所记录
      temporary_records:[],   //临时作答记录
      topic_grade:0, //每题分值
      train_grade:0, //总分值
      true_nums:0,  //结算分数----用户作答正确题目数量
      false_nums:0,  //结算分数----用户作答错误及未作答题目数量
      // is_show_records_status:false,   //是否显示勾勾叉叉
      test_records_list:[],  //全部作答记录---存储vuex的媒介
      activeIndex: 0, // 作答记录默认显示第一项
      //题库范围百分比
      topic_range_list:[],
    }
  },
  components:{
    // random_mode_map
  },
  computed:{
    username(){
        // return this.$store.state.response.Name
      let data =  JSON.parse(localStorage.getItem('familiar_with_qujingmap_userinfo'))
      // console.log('用户数据：',data.Name)
      return data.user_name
      },
    //试卷上显示的题目数量
    test_nums(){
      return this.topic_list_options.length
    },
    vuex_test_records_list(){  //全部作答记录---vuex
      return this.$store.state.test_records_list
    }

  },
  watch:{
    'user_selected'(){
      // console.log('用户选择：',this.user_selected)
      //更新答题卡颜色
      this.answer_cards_topic()
    },

  },
  created() {
    this.get_topic_list()
  },
  mounted() {

  },
  methods:{
    //去首页
    to_functionPage(){
      this.$store.commit('setexit_sure_status',true)
    },
    //打开全部作答记录
    open_test_records_list_show(index){
      this.activeIndex = index
    },
    //交卷
    submit_the_paper(){
      //定时器归零
      this.end_test_conutTime()
      //清空分数
      this.true_nums = 0
      this.false_nums = 0
      // this.topic_grade = 0

      this.records = []  //清空作答记录
      //开启阴影----进行计算
      this.submit_text = '交卷中……'
      this.submit_the_paper_pop = true
      setTimeout(()=>{
        this.submit_text = '交卷成功'
          //用户作答
          let user_answer_list = this.user_selected
          //正确答案
          let true_answer_list = [] //正确答案
          let topic_list = [] //题目列表
          let options = this.topic_list_options[0].options
          // console.log('选项列表：',options)
          // let test_list = []
        // console.log('题库列表：',this.topic_list_options)
          for(let i=0;i<this.topic_list_options.length;i++){
            topic_list.push(this.topic_list_options[i].topic)
            // test_list.push(this.topic_list_options[i].topic)
            true_answer_list.push(this.topic_list_options[i].true_answer)
          }
          // console.log('用户作答：',user_answer_list)
          // console.log('正确答案：',true_answer_list)
          // console.log('题目列表：',topic_list)
          // console.log('答案列表：',true_answer_list)
          //判正误
          //循环用户作答，循环正确答案
          for(let i=0;i<true_answer_list.length;i++){
            let topic = topic_list[i]
            // console.log(i+1,'题目：',topic)
            let user_answer = user_answer_list[i]
            let true_answer = true_answer_list[i]
            let status = false //初始化作答正误状态---初始为错误
            if(String(user_answer) === String(true_answer)){
                //正确
                 status = true
                 this.true_nums++
              }
            // console.log(i+1,'题目：',topic)
            // console.log('选项列表：',options)
            //加入临时作答记录
            this.temporary_records.push(
                {
                topic:topic,
                true_answer:true_answer,
                user_answer:user_answer,
                status:status,
                options:options
              }
            )
            //加入作答记录
            this.records = this.temporary_records  //加入缓存作答记录
          }
          //错误以及未作答
          this.false_nums = true_answer_list.length - this.true_nums
          //计算总分值
          this.train_grade = Math.round(this.topic_grade * this.true_nums)
          // console.log('正确数：',this.true_nums,'错误及未作答数：',this.false_nums,'每题分值：',this.topic_grade,'总分：',this.train_grade)
          // console.log('作答记录：',this.records)
          //显示勾勾叉叉
          // this.is_show_records_status = true
          this.temporary_records = []  //清空缓存作答记录
          let now_time = this.getFormattedDate()
          //作答记录以及总分加入到全部记录
          this.test_records_list = {
                time:now_time,
                train_grade:this.train_grade,
                records:this.records,
              }
          // console.log('记录：',this.test_records_list)
          //作答记录上传vuex
          this.$store.commit('set_test_records_list',this.test_records_list)
          // console.log('vuex记录：',this.$store.state.test_records_list)
          this.user_selected = []  //清空用户作答记录
          this.temporary_records = [] //清空临时作答记录
      },1000)
      this.start_button = '开始作答'
      this.test_status = false  //重置测试状态
    },

    //获取当前时间-----存储到作答记录
    getFormattedDate(){
      let now = new Date()
      let year = now.getFullYear()
      let month = now.getMonth()+1
      let day = now.getDate()
      let hours = now.getHours()
      let minutes = now.getMinutes()
      return `${year}-${month}-${day}-${hours}:${minutes.toString().padStart(2,'0')}`
    },

    //计算机答题卡题目的数量以及处理已作答未做答的元素颜色
    answer_cards_topic(index){
      return !!this.user_selected[index-1]
    },
    //开始测试计时
    test_compute_time(){
      if (this.test_time_timer) {
        clearInterval(this.test_time_timer);
        this.test_time_timer = null
      }
      this.test_time_timer = setInterval(()=>{
          if(this.test_time.sec < 60){
            this.test_time.sec++
            this.test_time.sec = this.test_time.sec.toString().padStart(2,'0')
            if(this.test_time.sec >= 60){
              this.test_time.sec = 0
              this.test_time.sec = this.test_time.sec.toString().padStart(2,'0')
              this.test_time.min++
              this.test_time.min = this.test_time.min.toString().padStart(2,'0')
              if(this.test_time.min >= this.test_conutTime.min){
                //测试结束
                this.end_test_conutTime()
              }
            }
          }
      },1000)
    },

    //开始测试倒计时
    start_test_conutTime(){
      // 清除之前的计时器
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null
      }
      // 解析当前时间
      let totalSeconds =
        parseInt(this.test_conutTime.hour) * 3600 +
        parseInt(this.test_conutTime.min) * 60 +
        parseInt(this.test_conutTime.sec);

      this.timer = setInterval(() => {
        if (totalSeconds <= 0) {
          clearInterval(this.timer);
          // 考核时间结束，自动提交
          this.end_test_conutTime()
          return;
        }
        totalSeconds--;
        // 更新显示时间
        const hours = Math.floor(totalSeconds / 3600);
        const minutes = Math.floor((totalSeconds % 3600) / 60);
        const seconds = totalSeconds % 60;

        this.test_conutTime = {
          hour: hours.toString().padStart(2, '0'),
          min: minutes.toString().padStart(2, '0'),
          sec: seconds.toString().padStart(2, '0')
        };
      }, 1000);
      //关闭遮罩层
      this.start_pop_status= false
    },
    //停止测试定时器
    stop_test_conutTime(){
      if(this.timer){
        clearInterval(this.timer);
        this.timer = null;
      }
      if(this.test_time_timer){
        clearInterval(this.test_time_timer);
        this.test_time_timer = null;
      }
    },
    //测试计时器归零
    end_test_conutTime(){
      if(this.timer){
        clearInterval(this.timer);
        this.timer = null;
        //开启遮罩层
        this.submit_the_paper_pop= true
      }
      if(this.test_time_timer){
        clearInterval(this.test_time_timer);
        this.test_time_timer = null;
        //开启遮罩层
        this.submit_the_paper_pop= true
      }
      this.test_conutTime.hour='00'
      this.test_conutTime.min='30'
      this.test_conutTime.sec='00'

      this.test_time.hour='00'
      this.test_time.min='00'
      this.test_time.sec='00'
      
    },





    //开始测试
    start_test(){
        this.submit_the_paper_pop = false
        this.start_button = '作答中……'
        this.test_status = true  //开启测试状态
        this.start_pop_status = false
        this.is_show_records_status = false  //勾勾叉叉关闭
        this.start_test_conutTime() //开始倒计时
        this.test_compute_time()  //开始计时器
    },
    //停止测试
    // stop_test(){
    //   this.test_status = false  //关闭测试状态
    //   this.start_pop_status = true
    //   this.start_button = '继续作答'
    //   this.stop_test_conutTime()
    // },

    //用户输入题量的最大值最小值
    topic_nums_number_range(){
      if(this.topic_nums_number < 10){
        this.topic_nums_number = 10
      }else if(this.topic_nums_number > 137){
        this.topic_nums_number = 137
      }
    },

    //模式退出
    mode_exit(){
      this.$store.commit('set_mode_exit_status',false)
      this.$router.replace('/train').catch(err => {
          if (err.name !== 'NavigationDuplicated') {
            // 如果不是重复导航错误，可以抛出错误或进行其他处理
            throw err;
          }
        });
    },


    //获取父组件传回的题库
    get_topic_list(){
      let all_county_town_data = this.$store.state.all_county_town_data
      // console.log('全部乡镇数据：',all_county_town_data)
      //去除各个县下辖的重复乡镇街道名字
      let cycle_town_list = ["板桥镇","老厂乡"]
      // 富源老厂镇、罗平老厂乡、会泽老厂乡、宣威板桥镇、陆良板桥镇、罗平板桥镇
      // 遍历所有县的数据
      for (let i = 0; i < all_county_town_data.length; i++) {
          // 过滤掉在 cycle_town_list 中出现的乡镇
          all_county_town_data[i].towns = all_county_town_data[i].towns.filter(
              town => !cycle_town_list.includes(town)
          );
      }
      // console.log('全部乡镇数据：',all_county_town_data)
      this.all_county_town_JSONdata = all_county_town_data
      //各个县区的题库分界
      for(let i=0;i<all_county_town_data.length;i++){
        if(all_county_town_data[i].county_name === '会泽县'){
          this.county_town_data.huize = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '沾益区'){
          this.county_town_data.zhanyi = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '马龙区'){
          this.county_town_data.malong = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '麒麟区'){
          this.county_town_data.qilin = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '富源县'){
          this.county_town_data.fuyuan = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '陆良县'){
          this.county_town_data.luliang = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '罗平县'){
          this.county_town_data.luoping = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '师宗县'){
          this.county_town_data.shizong = all_county_town_data[i].towns
        }else if(all_county_town_data[i].county_name === '宣威市'){
          this.county_town_data.xuanwei = all_county_town_data[i].towns
        }
      }
      for(let i=0;i<this.county_town_data.huize.length;i++){
        let town = this.county_town_data.huize[i]
        this.county_town_data_topic_list.huize.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'会泽县',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.xuanwei.length;i++){
        let town = this.county_town_data.xuanwei[i]
        this.county_town_data_topic_list.xuanwei.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'宣威市',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.zhanyi.length;i++){
        let town = this.county_town_data.zhanyi[i]
        this.county_town_data_topic_list.zhanyi.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'沾益区',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.malong.length;i++){
        let town = this.county_town_data.malong[i]
        this.county_town_data_topic_list.malong.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'马龙区',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.qilin.length;i++){
        let town = this.county_town_data.qilin[i]
        this.county_town_data_topic_list.qilin.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'麒麟区',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.fuyuan.length;i++){
        let town = this.county_town_data.fuyuan[i]
        this.county_town_data_topic_list.fuyuan.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'富源县',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.luliang.length;i++){
        let town = this.county_town_data.luliang[i]
        this.county_town_data_topic_list.luliang.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'陆良县',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.luoping.length;i++){
        let town = this.county_town_data.luoping[i]
        this.county_town_data_topic_list.luoping.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'罗平县',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      for(let i=0;i<this.county_town_data.shizong.length;i++){
        let town = this.county_town_data.shizong[i]
        this.county_town_data_topic_list.shizong.push(
            {
              topic:`请从下列选项中找出${town}所属的县（区）：`,
              true_answer:'师宗县',
              options:['会泽县','宣威市','沾益区','马龙区','麒麟区','富源县','陆良县','罗平县','师宗县']
            }
        )
      }
      // console.log('题库：',this.county_town_data_topic_list)
      this.convert_topic_list()//this.county_town_data_topic_list数据转换为题库
      this.random_100_topic_list()
    },
    //this.county_town_data_topic_list数据转换为题库
    convert_topic_list(){
      let topic_list = []
      for(let i=0;i<this.county_town_data_topic_list.huize.length;i++){
        topic_list.push(this.county_town_data_topic_list.huize[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.xuanwei.length;i++){
        topic_list.push(this.county_town_data_topic_list.xuanwei[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.zhanyi.length;i++){
        topic_list.push(this.county_town_data_topic_list.zhanyi[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.qilin.length;i++){
        topic_list.push(this.county_town_data_topic_list.qilin[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.malong.length;i++){
        topic_list.push(this.county_town_data_topic_list.malong[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.fuyuan.length;i++){
        topic_list.push(this.county_town_data_topic_list.fuyuan[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.luliang.length;i++){
        topic_list.push(this.county_town_data_topic_list.luliang[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.luoping.length;i++){
        topic_list.push(this.county_town_data_topic_list.luoping[i])
      }
      for(let i=0;i<this.county_town_data_topic_list.shizong.length;i++){
        topic_list.push(this.county_town_data_topic_list.shizong[i])
      }
      // console.log('题库：',topic_list)
      //去重
      let new_topic_list = this.deduplcation_topic_list(topic_list)
      this.topic_list_options = new_topic_list
      // console.log('题库：',this.topic_list_options)
      
    },
    //题库去重
    deduplcation_topic_list(topic_list){
      let deduplcation_topic_list = []
      for(let i=0;i<topic_list.length;i++){
        if(!deduplcation_topic_list.includes(topic_list[i])){
          deduplcation_topic_list.push(topic_list[i])
        }
      }
      // console.log('去重方法的题库：',deduplcation_topic_list)
      return deduplcation_topic_list
    },

    //随机选出100道题
    random_100_topic_list(){
      let random_list = this.getRandomSum()
      // console.log('随机数组（和100）：',random_list,'和：',random_list.reduce((acc,curr) => acc + curr,0))
      //随机百分比的题库范围
      // let huize_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.huize.length;
      // let xuanwei_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.xuanwei.length;
      // let zhanyi_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.zhanyi.length;
      // let qilin_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.qilin.length;
      // let malong_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.malong.length;
      // let fuyuan_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.fuyuan.length;
      // let luliang_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.luliang.length;
      // let luoping_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.luoping.length;
      // let shizong_random = (Math.floor(Math.random()*9+1)/10) * this.county_town_data_topic_list.shizong.length;
      //调用洗牌
      let huize_topic_list = this.getRandomElements(this.county_town_data_topic_list.huize,random_list[0])
      let xuanwei_topic_list = this.getRandomElements(this.county_town_data_topic_list.xuanwei,random_list[1])
      let zhanyi_topic_list = this.getRandomElements(this.county_town_data_topic_list.zhanyi,random_list[2])
      let qilin_topic_list = this.getRandomElements(this.county_town_data_topic_list.qilin,random_list[3])
      let malong_topic_list = this.getRandomElements(this.county_town_data_topic_list.malong,random_list[4])
      let fuyuan_topic_list = this.getRandomElements(this.county_town_data_topic_list.fuyuan,random_list[5])
      let luliang_topic_list = this.getRandomElements(this.county_town_data_topic_list.luliang,random_list[6])
      let luoping_topic_list = this.getRandomElements(this.county_town_data_topic_list.luoping,random_list[7])
      let shizong_topic_list = this.getRandomElements(this.county_town_data_topic_list.shizong,random_list[8])
      // console.log('会泽题库：',huize_topic_list)
      // console.log('宣威题库：',xuanwei_topic_list)
      // console.log('沾益题库：',zhanyi_topic_list)
      // console.log('马龙题库：',malong_topic_list)
      // console.log('麒麟题库：',qilin_topic_list)
      // console.log('富源题库：',fuyuan_topic_list)
      // console.log('陆良题库：',luliang_topic_list)
      // console.log('罗平题库：',luoping_topic_list)
      // console.log('师宗题库：',shizong_topic_list)
      //合并所有县区的列表
      let topic_list = [
        ...huize_topic_list,
        ...xuanwei_topic_list,
        ...zhanyi_topic_list,
        ...qilin_topic_list,
        ...malong_topic_list,
        ...fuyuan_topic_list,
        ...luliang_topic_list,
        ...luoping_topic_list,
        ...shizong_topic_list
      ]
      if(topic_list.length < 100){
        let num = 100 - topic_list.length
        // console.log('还差：',num)
        topic_list = []
        let first = 0
        let second = 0
        if(num > 10){
          first = Math.floor(Math.random() * 10) + 1
          second = num - first
        }else{
          first = 1
          second = num - first
        }
        let random_list_add = []
        random_list_add[0] = first + random_list[0]
        random_list_add[1] = second + random_list[1]
        // console.log('二次随机数组（和100）：',random_list,first,second)
        huize_topic_list = this.getRandomElements(this.county_town_data_topic_list.huize,random_list_add[0])
        xuanwei_topic_list = this.getRandomElements(this.county_town_data_topic_list.xuanwei,random_list_add[1])
        //重新合并
        topic_list = [
            ...huize_topic_list,
            ...xuanwei_topic_list,
            ...zhanyi_topic_list,
            ...qilin_topic_list,
            ...malong_topic_list,
            ...fuyuan_topic_list,
            ...luliang_topic_list,
            ...luoping_topic_list,
            ...shizong_topic_list
      ]
      }else if(topic_list.length > 100){
        // console.log('超出：',topic_list.length - 100)
      }
      // console.log(this.county_town_data_topic_list.huize)
      // console.log('题库：',topic_list)
      this.topic_list = topic_list
      // let disturb_topic_list = this.disturb_topic_list(topic_list)
      // console.log('打乱后的题库：',disturb_topic_list)
      //打乱题库顺序
      this.disturb_topic_list()
      // console.log('打乱后的题库：',this.topic_list)
      //题库范围-----各个县区所占比列
      // let nums = random_list.reduce((acc,curr) => acc + curr,0)
      // console.log('题库范围比例：',random_list,'和：',nums)
      this.set_topic_range(random_list)
      //计算每题分值
      this.topic_grade = 100 / topic_list.length
    },

    //设置题库范围-----各个县区所占比列
    set_topic_range(random_list){
      let percentages = random_list.map(num => `${num}%`)
      this.topic_range_list = percentages
      // console.log('题库范围比例：',this.topic_range_list)
    },

    //Fisher-Yates洗牌算法---------取出百分比含量的对应县区题库
    getRandomElements(topic_list,percentage){
      if (topic_list.length <= percentage) {
        return [...topic_list];
      }
      let shuffled = [...topic_list]
      let i = topic_list.length
      let min = i - percentage
      //洗牌算法
      while (i-- > min){
        let index = Math.floor((i+1)*Math.random());
        [shuffled[i],shuffled[index]] = [shuffled[index],shuffled[i]];
      }
      return shuffled.slice(min)
    },
    //Fisher-Yates洗牌算法------获取9个能相加100随机数字
    getRandomSum(){
      let count = 9
      let total = 100
      let numbers = Array(count).fill(1)
      let remaining = total - count
      //随机分配剩余的值
      for(let i = 0;i<remaining;i++){
        let index = Math.floor(Math.random() * count)
        numbers[index]++
      }
      //洗牌打乱顺序
      for(let i = numbers.length - 1;i>0;i--){
        let j = Math.floor(Math.random() * (i+1));
        [numbers[i],numbers[j]] = [numbers[j],numbers[i]]
      }
      return numbers
    },
    //Fisher-Yates洗牌算法------打乱题库顺序
    disturb_topic_list(){
      let new_topic_list = [...this.topic_list];
      //从后向前遍历数组
      for(let i = new_topic_list.length - 1 ; i >= 0 ; i--){
        //随机索引
        let j = Math.floor(Math.random() * (i+1));
        //交换当前元素和随机索引元素
        [new_topic_list[i],new_topic_list[j]] = [new_topic_list[j],new_topic_list[i]]
      }
      this.topic_list =  new_topic_list
      this.topic_list_options = this.topic_list
    },



    //打开作答记录
    open_records(){
      this.train_records_show = true
    },
    //关闭作答记录
    shutdown_train_records(){
      this.train_records_show = false
    }
  },
  beforeDestroy() {
    clearTimeout(this.timer)
    this.mode_exit()
  }
}
</script>

<style scoped>
  .test_mode_content{
    width: 69vw;
    height: 90vh;
    /*background-color: #94e094;*/
  }
  .test_mode_content_top_content{
    width: 69vw;
    height: 10vh;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px dashed black;
    background-color: #565756;
    position: absolute;
    top: 0;
  }
  .test_mode_content_top_content div{
    width: 33%;
    height: 100%;
    /* margin-right: 1px; */
    /* background-color: #09fab6; */
    float: left;
  }
  .test_mode_content_top_content div:nth-child(2){
    text-align: center;
    line-height: 10vh;
    font-size: 2vw;
    color: white;
    font-weight: bolder;
  }
  .test_mode_content_top_content div:nth-child(1){
    box-sizing: border-box;
    padding-left: 1vw;
    text-align: left;
    line-height: 10vh;
    color: white;
    font-size: 0.6vw;
  }
  .test_mode_content_top_content div:nth-child(1):hover{
    cursor: pointer;
  }
  .test_mode_content_top_content div:nth-child(1) span:hover{
    color: #0aa2e8;
  }
  .mode_exit{
    width: 3vw;
    height: 5vh;
    /*background-color: red;*/
    position: relative;
    top: 2.5vh;
    left: 65vw;
    text-align: center;
    /*line-height: 5vh;*/
    float: left;
  }
  .mode_exit i{
    position: relative;
    top: -3vh;
    font-size: 2vw;
    /*background-color: yellow;*/
  }
  .mode_exit i:hover{
    cursor: pointer;
    color: red;
  }
  .mode_exit i:active{
    cursor: pointer;
    color: green;
    font-size: 2.2vw;
  }
  .test_mode_content_top_content div:nth-child(3) .test_records_list{
    width: 7vw;
    height: 3vh;
    /* background-color: red;  */
    line-height: 3vh;
    position: relative;
    top: 3.5vh;
    left: 18vw;
    text-decoration: underline;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .test_mode_content_top_content div:nth-child(3) .test_records_list:hover{
    cursor: pointer;
    color: rgb(12, 223, 58);
  }
  .test_mode_content_top_content div:nth-child(3) .test_records_list:active{
    color: red;
  }





  .test_questions_answer{
    width: 35vw;
    height: 78vh;
    background-color: #e8eeec;
    border-radius: 10px;
    /*float: left;*/
    position: relative;
    top: 12vh;
  }
  .test_questions_content{
    width: 34vw;
    height: 76vh;
    /*background-color: #8ecde0;*/
    position: relative;
    top: 1vh;
    left: calc(50% - 17vw);
  }
  .test_questions_content_title{
    width: 34vw;
    height: 4vh;
    /*background-color: #2d71e7;*/
    text-align: center;
    line-height: 4vh;
    font-size: 1.5vw;
    font-weight: bolder;
  }
  .test_questions_content_info{
    width: 34vw;
    height: 3vh;
    /*background-color: #5d92ee;*/
    border-bottom: 1px dashed black;
  }
  .test_questions_content_info_div{
    width: 33%;
    height: 3vh;
    /*background-color: #5deebb;*/
    float: left;
    margin-right: 1px;
    text-align: center;
    line-height: 3vh;
  }
  .test_questions_content_questions{
    width: 34vw;
    height: 65vh;
    box-sizing: border-box;
    /*background-color: #acd2de;*/
    overflow: hidden;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
    padding-top: 2vh;
  }
  .test_questions_content_questions::-webkit-scrollbar{
    display: none;
  }
  .test_questions_content_question{
    width: 34vw;
    height: 7vh;
    /*background-color: #e7e42d;*/
    box-sizing: border-box;
    margin-bottom: 2vh;
    color: #171716;
  }
  .status_true{
    color: #0a3ae8;
  }
  .status_false{
    color: red
  }
  .status_tip{
    width: 3vw;
    height: 4vh;
    /*background-color: #f10c4d;*/
    text-align: center;
    line-height: 4vh;
    font-size: 2vw;
  }
  .test_questions_content_question_topic{
    width: 34vw;
    height: 4vh;
    /*background-color: #dbd976;*/
    line-height: 4vh;
    font-weight: bolder;
    /*padding-left: 0.5vw;*/
    color: #525151;
  }
  .test_questions_content_question_answer_status{
    width: 5vw;
    height: 4vh;
    /*background-color: red;*/
    position: relative;
    top: -4vh;
    left: 29vw;
  }
  .test_questions_content_question_options{
    width: 34vw;
    height: 3vh;
    /*background-color: #8576db;*/
  }
  .test_questions_content_question_option{
    width: 3.77vw;
    height: 3vh;
    /*background-color: #6048ea;*/
    float: left;
    box-sizing: border-box;
    /*border-right: 1px solid black;*/
    color: #666666;
    font-size: 0.7vw;
    line-height: 3vh;
  }
  .test_questions_content_submit{
    width: 34vw;
    height: 4vh;
    /*background-color: #6048ea;*/
  }
  .test_questions_content_submit_div{
    width: 33%;
    height: 4vh;
    float: left;
    /*border-right: 1px solid black;*/
    /*background-color: #afa6e0;*/
    border-top: 1px dashed black;
  }
  .test_questions_content_submit_div_allTime{
    width: 10vw;
    height: 3vh;
    text-align: center;
    line-height: 3vh;
    /*background-color: #2ea8e0;*/
    position: relative;
    top: 0.5vh;
    left: calc(50% - 5vw);
    color: #820bea;
    overflow: hidden;
  }
  .test_questions_content_submit_div_allTime span{
    color: #0a63e8;
  }
  .test_questions_content_submit_div_userTimed{
    width: 10vw;
    height: 3vh;
    text-align: center;
    line-height: 3vh;
    /*background-color: #2ea8e0;*/
    position: relative;
    top: 0.5vh;
    left: calc(50% - 5vw);
    color: #0beaa0;
  }
  .test_questions_content_submit_div_submint_button{
    width: 5vw;
    height: 3vh;
    text-align: center;
    line-height: 3vh;
    background-color: #2ea8e0;
    position: relative;
    top: 0.5vh;
    left: calc(50% - 2.5VW);
    border-radius: 10px;
    box-sizing: border-box;
  }
  .test_questions_content_submit_div_submint_button:hover{
    cursor: pointer;
    border: 1px solid yellow;
    background-color: #067aaf;
    color: white;
  }
  .test_questions_content_submit_div_submint_button:active{
    color: #0ae80a;
  }








  .test_right_info{
    width: 33vw;
    height: 78vh;
    /*background-color: #11e34d;*/
    box-sizing: border-box;
    position: relative;
    top: -66vh;
    left: 36vw;
  }
  .test_user_interface{
    width: 33vw;
    height: 20vh;
    background-color: #666666;
    border: 1px dashed black;
    border-radius: 10px;
    overflow: hidden;
    color: #14d987;
    box-sizing: border-box;
  }
  .test_user_interface_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #09ec49;*/
    text-align: center;
    line-height: 3vh;
    box-sizing: border-box;
    border-bottom: 1px solid black;
  }
  .test_user_interface_content{
    width: 33vw;
    height: 27vh;
    /* background-color: #09ec49; */
  }
  .test_user_interface_content_select_place{
    width: 33vw;
    height: 4vh;
    /*background-color: #278441;*/
    box-sizing: border-box;
    padding-left: 0.5vw;
    color: black;
  }
  .test_user_interface_content_select_place_tip{
    width: 4vw;
    height:4vh;
    line-height: 4vh;
    /*background-color: red;*/
    font-size: 0.8vw;
  }
  /*.block{*/
  /*  width: 8vw;*/
  /*  height:3vh;*/
  /*  position: relative;*/
  /*  top: -3.5vh;*/
  /*  left: 4vw;*/
  /*}*/
  .test_user_interface_content_select_topic_nums{
    width: 33vw;
    height: 4vh;
    /*background-color: #34f169;*/
    box-sizing: border-box;
    padding-left: 0.5vw;
    color: black;
  }
  .test_user_interface_content_select_topic_tip{
    width: 6vw;
    height:4vh;
    line-height: 4vh;
    /*background-color: red;*/
    font-size: 0.8vw;
  }
  .test_user_interface_content_select_topic_nums input{
    width: 3vw;
    height:3vh;
    position: relative;
    top: -3.5vh;
    left: 6vw;
    font-size: 1vw;
    line-height: 3vh;
    border: 1px solid #ece7e7;
    background-color: white;
    outline: none;
    border-radius: 3px;
    color: #868080;
  }
  .test_user_interface_content_select_topic_nums input:focus{
    border: 1px solid #0c62f1;
  }
  .test_user_interface_content_place_range{
    width: 33vw;
    height: 9vh;
    background-color: #8a948d;
  }
  .test_user_interface_content_place_range_tip{
    width: 6vw;
    height: 9vh;
    background-color: #51ad6b;
    /*text-align: center;*/
    line-height: 9vh;
    color: black;
    padding-left: 0.5vw;
  }
  .test_user_interface_content_place_rang_list{
    width: 27vw;
    height: 9vh;
    background-color:#7c807d;
    position: relative;
    top: -9vh;
    left: 6vw;
    box-sizing: border-box;
    padding-top: 1vh;
    padding-left: 2vh;
  }
  .test_user_interface_content_place_rang_li{
    width: 8vw;
    height: 2vh;
    background-color: yellow;
    box-sizing: border-box;
    float: left;
    margin-bottom: 0.5vh;
    margin-left: 0.5vh;
  }
  .test_user_interface_content_set{
    width: 33vw;
    height: 13vh;
    /*background-color: #81ce96;*/
    overflow: hidden;
  }
  .test_user_interface_content_set_left{
    width: 16.4vw;
    height: 13vh;
    background-color: #6c706d;
    border-right: 1px dashed black;
  }
  .test_user_interface_content_set_left_title{
    width: 16.4vw;
    height: 3vh;
    /*background-color: #40f672;*/
    text-align: center;
    line-height: 3vh;
    color: #10eee3;
    font-size: 0.8vw;
  }
  .test_user_interface_content_set_left_content{
    width: 16.4vw;
    height: 10vh;
    /*background-color: #084c1b;*/
    padding: 0.5vw;
    box-sizing: border-box;
  }
  .test_user_interface_content_set_left_content_list{
    width: 4.5vw;
    height: 2vh;
    background-color: #6c706d;
    float: left;
    margin-bottom: 1vh;
    margin-right: 1vh;
    box-sizing: border-box;
    border: 1px dashed black;
  }
  .county_range_percentage{
    /*width: 1vw;*/
    height: 2vh;
    background-color: #e04e29;
  }
  .county_range_percentage_text{
    width: 4.5vw;
    height: 2vh;
    /*background-color: #eabfb4;*/
    float: left;
    position: relative;
    top: -2vh;
    text-align: center;
    line-height: 2vh;
    font-size: 0.5vw;
  }
  .test_user_interface_content_set_right{
    width: 16.5vw;
    height: 13vh;
    background-color: #6b6d6c;
    /* background-color: #08e476;  */
    /* float: left; */
    position: relative;
    top: -13vh;
    left: 16vw;
  }
  .test_user_interface_content_set_right_repeat_button{
    width: 4vw;
    height: 3vh;
    background-color: #3d3f3f;
    box-sizing: border-box;
    /* background-color: #e90c2a; */
    /* float: left; */
    overflow: hidden;
    position: relative;
    top: 5vh;
    left: calc(50% - 2vw);
    text-align: center;
    line-height: 3vh;
    border-radius: 10px;
    font-size: 0.8vw;
    /* box-sizing: border-box; */
    border: 1px solid rgb(16, 230, 176);
  }
  .test_user_interface_content_set_right_repeat_button:hover{
    border: 1px solid rgb(230, 16, 16);
    cursor: pointer;
  }
  .test_user_interface_content_set_right_repeat_button:active{
    border: 1px solid #de1d1d;
    color: red;
  }

  .test_user_interface_content_start_test{
    width: 33vw;
    height: 4vh;
    background-color: #6f706f;
    overflow: hidden;
    position: relative;
    /*top: -8.5vh;*/
  }
  .test_user_interface_content_start_test_start_botton{
    width: 4vw;
    height: 3vh;
    background-color: #3d3f3f;
    text-align: center;
    line-height: 3vh;
    position: relative;
    top: 0.5vh;
    left: calc(50% - 2vw);
    border-radius: 10px;
    box-sizing: border-box;
    font-size: 0.7vw;
    border: 1px solid yellow;
  }
  .test_user_interface_content_start_test_start_botton:hover{
    /* background-color: #1095d3; */
    border: 1px solid rgb(235, 7, 7);
    cursor: pointer;
    color: #f5f0f0;
    border: 1px solid #ec1244;
  }








  .test_user_interface_answer_input div{
    width: 5vw;
    height: 2.5vh;
    /*background-color: red;*/
    position: relative;
    top: 2.5vh;
    font-size: 0.8vw;
    text-align: center;
    color: red;
    font-weight: bolder;
  }
  .test_user_interface_answer_input input{
    width: 5vw;
    height: 3vh;
    position: relative;
    top: 2.3vh;
    border: none;  /*去除默认边框*/
    outline: none;   /*去除选中时的高亮边框*/
    border: 1px #09fab6 dashed;
    background-color: #b9d2d1;
    color: white;
    box-sizing: border-box;
    color: #cc0dee;
    text-align: center;
  }
  .test_user_interface_answer_input input:focus{
    border: 1px #079aea dashed;
    background-color: #98ceb9;
  }






  .test_training_records{
    width: 33vw;
    height: 56vh;
    /*background-color: #9ceab2;*/
    background-color: #343436;
    position: relative;
    top: 2vh;
    box-sizing: border-box;
    color: #146dd9;
    border: 1px dashed black;
    box-sizing: border-box;
    overflow: hidden;
    border-radius: 10px;
  }
  .test_training_records_title{
    width: 33vw;
    height: 3vh;
    /*background-color: #0fe8c7;*/
    background-color: #343436;
    color: #0ae80a;
    text-align: center;
    line-height: 3vh;
    font-weight: bolder;
    box-sizing: border-box;
    border-bottom: 1px solid black;
  }
  .test_training_records_content{
    width: 32vw;
    height: 45vh;
    /*background-color: yellow;*/
    line-height: 3vh;
    box-sizing: border-box;
    position: relative;
    top: 1vh;
    left: calc(50% - 16vw);
    padding: 1vw;
    overflow: hidden;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .test_training_records_content::-webkit-scrollbar{
    display: none;
  }
  .answer_cards_topic_nav{
    width: 1.5vw;
    height: 3vh;
    background-color: #d2d7d1;
    float: left;
    margin: 0.5vw;
    text-align: center;
    line-height: 2vh;
    font-size: 0.5vw;
    text-align: center;
    line-height: 3vh;
  }
  .answer_cards_height_light{
    background-color: #0aea0a;
  }
  .test_training_records_grade{
    width: 32vw;
    height: 5vh;
    /*background-color: #18d4ee;*/
    position: relative;
    top: 1vh;
    left: calc(50% - 16vw);
    border-top: 1px dashed black;
    font-size: 0.5vw;
  }
  .test_training_records_grade>div{
    width: 32%;
    height: 5vh;
    /*background-color: #5118ee;*/
    float: left;
    margin-left: 2px;
    text-align: center;
    line-height: 5vh;
  }
  .test_training_records_grade>div>span{
    color:  #0ae80a;
  }






/*  阴影遮罩*/
  .start_pop{
    width: 35vw;
    height: 80vh;
    background-color:rgba(0,0,0,0.5);
    position: relative;
    top: -76vh;
    border-radius: 10px;
  }
  .submit_the_paper{
    width: 35vw;
    height: 80vh;
    background-color:rgba(0,0,0,0.5);
    position: relative;
    top: -76vh;
    border-radius: 10px;
    text-align: center;
    line-height: 80vh;
    font-size: 2vw;
    color: #0ae80a;
  }

  .train_records{
    width: 60vw;
    height: 80vh;
    background-color:white;
    float: left;
    position:absolute;
    top: 1vh;
    left: 1vw;
    box-shadow: 0 0 1vw black;
    border-radius: 10px;
    overflow: hidden;
  }
  .train_records_title{
    width: 60vw;
    height: 4vh;
    background-color: #5a5e5c;
    text-align: center;
    line-height: 4vh;
    color: white;
    font-size: 1vw;
  }
  .train_records_title>div{
    width: 33.2%;
    height: 4vh;
    /*background-color: #ee0a0a;*/
    float: left;
  }
  .train_records_title .icon{
    /*background-color: #0ae80a;*/
    text-align: right;
    box-sizing: border-box;
    padding-right: 1vw;
  }
  .train_records_title i:hover{
    color: #0ae80a;
  }
  .train_records_title i:active{
    color: #ef1246;
  }

  .train_records_content{
    width: 60vw;
    height: 76vh;
    /*background-color: #e79494;*/
  }
  .train_records_content_left{
    width: 20vw;
    height: 76vh;
    background-color: #878988;
    border-right: 1px dashed black;
    box-sizing: border-box;
    padding-top: 1vh;
    padding-bottom: 1vh;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .train_records_content_left::-webkit-scrollbar{
    display: none;
  }
  .train_records_content_right{
    width: 40vw;
    height: 76vh;
    background-color: #999393;
    position: relative;
    top: -76vh;
    left: 20vw;
     padding-top: 1vh;
    padding-bottom: 1vh;
  }
  .train_records_content_left_list{
    width: 18vw;
    height: 4vh;
    position: relative;
    left: calc(50% - 9VW);
    background-color: #e0dada;
    margin-bottom: 1vh;
    text-align: center;
    line-height: 4vh;
    border-radius: 10px;
    font-size: 0.6vw;
  }
  .train_records_content_left_list:hover{
    cursor: pointer;
    color: rgb(16, 224, 96);
  }
  .train_records_content_left_list:active{
    color: #ff2fe3;
  }
  .train_records_content_right_content{
    width: 38vw;
    height: 74vh;
    position: relative;
    left: calc(50% - 19VW);
    background-color: #d7d1d1;
    /*background-color: #d71212;*/
    box-shadow: 0 0 5px black;
    box-sizing: border-box;
    padding-top: 1vh;
    padding-bottom: 1vh;
    overflow-y: scroll;   /* 确保垂直滚动 */
    /*overflow-x: scroll;   !* 确保水平滚动 *!*/
    scrollbar-width:none;   /*火绒浏览器 */
    -ms-overflow-style: none;  /* IE浏览器 */
  }
  .train_records_content_right_content::-webkit-scrollbar{
    display: none;
  }
  .train_records_content_right_content_questions_list{
    width: 36vw;
    height: 6vh;
    /*background-color: #ea9292;*/
    /*background-color: #f31c1c;*/
    position: relative;
    left: calc(50% - 18VW);
    font-size: 0.7vw;
    /*text-align: center;*/
    /*line-height: 4vh;*/
    color: #1c1b1c;
    margin-bottom: 3vh;
  }
  .train_records_content_right_content_questions_list span:first-child{
    /* color: red; */
  }
  .train_records_content_right_content_questions_list span:last-child{
    /* color: rgb(230, 15, 15); */
  }
  .train_records_content_right_content_questions_list_topic{
    width: 36vw;
    height: 3vh;
    /*background-color: #ea9292;*/
    text-align: left;
    line-height: 3vh;
    overflow: hidden;
    font-size: 0.8vw;
  }
  .text-true-color{
    color: green;
  }
  .text-false-color{
    color: red;
  }
  .train_records_content_right_content_questions_list_options{
    width: 36vw;
    height: 3vh;
    /*background-color: #ce2929;*/
    text-align: left;
    line-height: 3vh;
  }
  .train_records_content_right_content_questions_list_options_option{
    width: 4vw;
    height: 3vh;
    /*background-color: #ce2929;*/
    float: left;
    overflow: hidden;
    font-size: 0.5vw;
  }
  .custom-radio {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #ccc;
  border-radius: 50%;
  outline: none;
  margin-right: 8px;
  position: relative;
  vertical-align: middle;
}

.custom-radio{
  border-color: black;
}
/* 选中状态 */
.custom-radio:checked {
  background-color: #8c8d8c; /* 您想要的颜色 */
  /*border-color: #4CAF50;*/
}

/* 内部圆点 */
  /*
.custom-radio:checked::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
*/
.true_or_false{
  width: 2vw;
  height: 3vh;
  /*background-color: #f5acac;*/
  position: relative;
  top: -6vh;
  left: 15vw;
  text-align: center;
  line-height: 3vh;
  font-size: 1vw;
}
.user_true{
  width: 2vw;
  height: 3vh;
  /*background-color: #39e7a2;*/
  color: #0ae80a;
}
.user_false{
  width: 2vw;
  height: 3vh;
  /*background-color: #397fe7;*/
  position: relative;
  color: red;
}


</style>